<template>
	<view class="bgcimg">
		<view class="body">
			<view class="logintext">{{switchtab==1?"登录":"切换账号"}}</view>
			<view class="loginmsg">
				<!-- 输入框 -->
				<view class="logininput flexleft">
					<view class="leftimage">
						<image class="phone" src="../../static/imags/login/phone.png" mode=""></image>
					</view>
					<input type="number" placeholder="请输入手机号" v-model="mobile">
				</view>
				<view class="logininput flexleft">
					<view class="leftimage">
						<image class="password " src="../../static/imags/login/password.png" mode=""></image>
					</view>
					<input type="password" placeholder="请输入密码" v-model="password">
				</view>
				<!-- 协议 -->
				<view class="xieyi flexcenter" @click="selectcheck" v-if="switchtab==1">
					<view :class="selecticon?'checkselect margin-right':'nocheckselect'">
						<image src="../../static/imags/login/select.png" mode=""></image>
					</view>
					<view>
						<text>登录即代表同意遵守</text>
						<text class="maincolor" @click.stop="userxieyi(3)">《拓客服务协议》</text>
						<text>和</text>
						<text class="maincolor" @click.stop="userxieyi(2)">《隐私政策》</text>
					</view>
				</view>
				<view class="loginbtn btn" @click="thelogin">{{switchtab==1?"登录":"切换账号"}}</view>
				<view class="flexbetween">
					<view class="regist maincolor" @click="wangji">忘记密码</view>
					<view class="regist maincolor" @click="regist">注册账号</view>
				</view>
				
			</view>
		</view>
		<view class="bottom flexcolumn">
			<view class="gongsimsg flexcenter">
				<view class="gslogo">
					<image :src="Config.gs_logo" mode=""></image>
				</view>
				<text>{{Config.gs_name}}</text>
			</view>
			<view class="contract" @click="phone(Config.gs_tel)">{{Config.gs_tel}}</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				mobile: "",
				password: "",
				selecticon: false,
				switchtab: 1 ,//1登录页面0切换账号
				Config:{},
			}
		},
		onLoad(options) {
			if(options.msg==0){
				console.log(options,111)
				this.switchtab = options.msg
				console.log(this.switchtab,111)
			}
			this.getConfigInfo()
		},
		methods: {
			getConfigInfo(){
				httpRequest.request('/employeesapi/index/getConfigInfo', 'GET', {
				}).then(resp => {
					this.Config = resp.data
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			thelogin() {
				let _this = this
				let mobile = _this.mobile;
				let password = _this.password
				if (mobile == '') {
					httpRequest.toast('请输入手机号');
					return false;
				}
				if (!mobile.match(/^1\d{10}$/)) {
					httpRequest.toast("请输入有效的手机号码");
					return false;
				}
				if (password == "") {
					httpRequest.toast('请输入密码');
					return false;
				}
				if(this.switchtab==1){
					if (!_this.selecticon) {
						httpRequest.toast('请仔细阅读拓客服务协议和隐私政策并勾选');
						return false;
					}
				}
				httpRequest.request('/employeesapi/user/login', 'POST', {
					account: mobile,
					password: password
				}).then(resp => {
					if (resp.code == 1) {
						console.log(resp, 222)
						httpRequest.toast(resp.msg, 2000);
						setTimeout(() => {
							let userinfo = resp['data'].userinfo;
							// 存
							uni.setStorageSync('token', userinfo['token']);
							uni.setStorageSync('user_id', userinfo['id']);
							uni.switchTab({
								url:"/pages/mypage/mypage"
							})
						}, 1000)
					}
					if (resp.code == 0) {
						httpRequest.toast(resp.msg);
					}
				})
			},
			selectcheck() {
				this.selecticon = this.selecticon ? false : true
			},
			userxieyi(value){
				uni.navigateTo({
					url:"/pages/mypage/about?msg="+value
				})
			},
			wangji() {
				uni.navigateTo({
					url: "/pages/thelogin/wangjimm"
				})
			},
			regist() {
				uni.navigateTo({
					url: "/pages/regist/regist"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 主背景
	.bgcimg {
		background: url("https://phnompenh.yuntaiqi.com/uploads/20220706/ec226cb339478e7f513a29a74a011368.png");
		background-size: cover;
		width: 100%;
		min-height: 100vh;
		background-size: 100%;
	}

	.body {
		padding: 0 68rpx;
		width: 100%;
		box-sizing: border-box;
	}

	// 顶部大字
	.logintext {
		font-size: 80rpx;
		padding-top: 180rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #3476fe;
	}

	// 登录内容开始
	.loginmsg {
		margin-top: 160rpx;
	}

	// 输入框
	.logininput {
		margin-top: 80rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #CECECE;
	}

	.leftimage {
		width: 50rpx;

		.phone {
			margin-top: 10rpx;
			width: 26rpx;
			height: 30rpx;
		}

		.password {
			margin-top: 10rpx;
			width: 28rpx;
			height: 36rpx;
		}
	}

	// 协议
	.xieyi {
		margin-top: 70rpx;
		font-size: 28rpx;
		font-weight: 800;
		color: #999999;
		// line-height:28rpx;
	}

	.nocheckselect {
		background-color: #fff;
		width: 25rpx;
		height: 25rpx;
		margin-right: 30rpx;
		border: 1rpx solid #3476fe;
		image {
			width: 21rpx;
			height: 14rpx;
			margin-bottom: 10rpx;
			margin-left: 2rpx;
		}
	}

	.checkselect {
		background-color: #3476fe;
		width: 25rpx;
		height: 25rpx;
		margin-right: 30rpx;
		border: 1rpx solid #3476fe;

		image {
			width: 21rpx;
			height: 14rpx;
			margin-bottom: 10rpx;
			margin-left: 2rpx;
		}
	}

	// 登录按钮
	.btn {
		width: 100%;
		padding: 30rpx 0;
		border-radius: 100rpx;
		text-align: center;
	}

	.loginbtn {
		margin-top: 70rpx;
		background-color: #3476fe;
		font-size: 36rpx;
		font-weight: 800;
		color: #FFFFFF;
	}

	.regist {
		margin-top: 46rpx;
		font-size: 24rpx;
		font-weight: 800;
	}

	// 底部
	.bottom {
		position: fixed;
		bottom: 30rpx;
		width: 100%;

	}

	.gongsimsg {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.gslogo {
		width: 39rpx;
		height: 32rpx;
		margin-right: 10rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.contract {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
</style>
